<template>
  <div class="w h over-a-y">
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="标注任务" :name="1"> </el-tab-pane>
      <el-tab-pane label="清洗任务" :name="2"> </el-tab-pane>
      <el-tab-pane label="审核任务" :name="3"> </el-tab-pane>
    </el-tabs>
    <div class="w box-b  f-s" style="height:calc(100% - 100px)">
      <el-table :data="tableDataList" height="100%">
        <el-table-column v-for="(column, i) in  dataLayout" :key="i" :prop="column.prop" :label="column.label"
          :width="column.width || 'auto'" :style="[column.style || '']">
          <template #default="{ row }">
            <span v-html="getRenderTableValue(column, row)"></span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="500">
       <template #default='{row}'>
            <!-- <el-button type="text"  @click="detailed(row.id)">任务详情</el-button> -->
          <el-button type="text">查看进度</el-button>
          <el-button type="text" @click="stopTask=true">中止任务</el-button>
           <!-- <el-button type="text" @click="turnTask(row)">任务移交</el-button> -->
       </template>
        </el-table-column>
      </el-table>
    </div>
         <el-dialog
    v-model="dialogVisibleTurn "
    title="任务移交"
    width="30%"
  >
    <span style="font-weight: 600;">将任务移交为下一位成员</span>
    <div class="tureTask">
      <span>用户编号:</span><el-input v-model="userId" style="width:60%"></el-input> 
    </div>
    <div class="tureTask">
       <span>用户名称:</span><el-input v-model="username" style="width:60%"></el-input>
    </div>
    <template #footer>
      <span>
        <el-button @click="dialogVisibleTurn=false">取消</el-button>
        <el-button type="primary" @click="submitTurn">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
       <el-dialog
    v-model="stopTask"
    title="提示"
    width="30%"
  >
    <span style="font-weight: 600;">确认是否要终止任务</span>
    <template #footer>
      <span>
        <el-button @click="stopTask=false">取消</el-button>
        <el-button type="primary" @click="submitStop">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
        <!-- <el-dialog
    v-model="taskdetailed "
    title="查看任务详情"
    width="40%"
  >
     <div class="taskdetailed">
      <div class="taskLabel">
        开始时间:
      </div>
      <div class="taskVal">
        {{taskDetailed.creatTime}}
      </div>
    </div>
      <div class="taskdetailed">
      <div class="taskLabel">
        任务名称:
      </div>
      <div class="taskVal">
        {{taskDetailed.name}}
      </div>
    </div>
       <div class="taskdetailed">
      <div class="taskLabel">
        数据标注状态:
      </div>
      <div class="taskVal">
        {{taskdetailed.assignADataType==1?'未标注':'已标注'}}
      </div>
    </div>
      <div class="taskdetailed">
      <div class="taskLabel">
        标注团队名称:
      </div>
      <div class="taskVal">
       {{taskDetailed.annotationTeamName}}
      </div>
    </div>
       <div class="taskdetailed">
      <div class="taskLabel">
        分配方式:
      </div>
      <div class="taskVal">
        均分
      </div>
    </div>
        <div class="taskdetailed">
      <div class="taskLabel">
        每人分配数量:
      </div>
      <div class="taskVal">
        {{taskDetailed.annotationNumber}}
      </div>
    </div>
        <div class="taskdetailed">
      <div class="taskLabel">
        成员权限范围:
      </div>
      <div class="taskVal">
        {{taskDetailed.doDelete==1?'可删除图片':''}}
      </div>
    </div>
         <div class="taskdetailed">
      <div class="taskLabel">
        任务截止时间:
      </div>
      <div class="taskVal">
        {{ taskDetailed.annotationEndTime}}
      </div>
    </div>
           <div class="taskdetailed">
      <div class="taskLabel">
        标注完数据集:
      </div>
      <div class="taskVal">
        {{taskDetailed.photoListName}}
      </div>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="taskdetailed=false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog> -->
    <div class="w f-e">
      <el-pagination v-model:current-page="current" :page-size="size" :background="false"
        layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100, 200, 300, 400]" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script lang="ts">
import { type TabsPaneContext } from 'element-plus'

import frameProperty from '@/mixins/frame-property'
import { type RequestCode } from '@/server/base'
import { MyTask } from '@/apis/myTask/index'
import { tableInfoTask } from './res';
import {getNowDate} from "@/utils"

export default {
  name: 'acceptTask',
  mixins: [frameProperty],
  data() {
    return {
      current: 1,
      size: 100,
      total: 1,
      dataLayout: tableInfoTask.layout as any[],
      tableList: { 1: [], 2: [], 3: [] } as any,

      paginationMap: {
        1: { current: 1, size: 20, total: 0, },
        2: { current: 1, size: 20, total: 0, },
        3: { current: 1, size: 20, total: 0, }
      } as any,

      activeName: 1 as 1 | 2 | 3,
      comp: null as any,
      timeoutId: 0,
      dialogVisibleTurn:false,
          dialogVisibleDel:false,
      taskdetailed:false,
      stopTask:false,
      taskColumn:{} as any,
      taskDetailed:{} as any,
      userId:'',
      username:''
    }
  },
  computed: {
    tableDataList() {
      return this.tableList[this.activeName];
    },
    current: {
      get(): number {
        return this.paginationMap[this.activeName].current;
      },
      set(val: number) {
        this.paginationMap[this.activeName].current = val;
      }
    },
    total: {
      get(): number {
        return this.paginationMap[this.activeName].total;
      },
      set(val: number) {
        this.paginationMap[this.activeName].total = val;
      }
    },
    size: {
      get(): number {
        return this.paginationMap[this.activeName].size;
      },
      set(val: number) {
        this.paginationMap[this.activeName].size = val;
      }
    },
  },
  watch: {
    activeName(news) {
      if (this.timeoutId > 0) {
        return;
      }
      this.getDataList();
      this.timeoutId = setTimeout(() => {
        clearTimeout(this.timeoutId);
      }, 2000);
    }
  },
  methods: {
        detailed(id:number|string){
      MyTask.detailed(id).then((res:RequestCode)=>{
        this.taskDetailed=res.data
        this.taskDetailed.creatTime=getNowDate(0, new Date( this.taskDetailed.creatTime)).substring(0, 16)
        this.taskDetailed.annotationEndTime=getNowDate(0, new Date( this.taskDetailed.annotationEndTime)).substring(0, 16)
        this.taskdetailed=true
      })
    },
      taggingTask(photoListId:number){
        this.$router.push({ name: 'taggingManage', params: { projectId: photoListId} })
    },  
    submitDel(){
      this.dialogVisibleDel=false
    },
    submitStop(){
      this.stopTask=false
    },
    turnTask(val:any){
      this.taskColumn=val
      console.log(val)
      this.userId=''
      this.username=''
      this.dialogVisibleTurn=true
    },
       getRenderTableValue: tableInfoTask.getRenderTableValue,
    submitTurn(){
      let params={
        subTaskId:this.taskColumn.id,
        photoListId:this.taskColumn.photoListId,
        oldUserId:this.taskColumn.userId,
        newUserId:this.userId
      }
      MyTask.transfer(params).then((res:RequestCode)=>{
        (this as any).$message.success('任务移交成功')
        this.getDataList()
      })
      
      this.dialogVisibleTurn=false
    },
    handleSizeChange(val: number) {
      this.size = val
      this.current = 1
      this.getDataList()
    },
    handleCurrentChange(val: number) {
      this.current = val
      this.getDataList()
    },
    getDataList() {
      const params = {
        current: this.current,
        size: this.size,
        taskType: this.activeName
      }
      MyTask.listByType(params)
        .then((res: RequestCode) => {
          const { total, size, current, pages, records } = res.data
          this.total = total
          this.size = size
          this.current = current
          // this.pages = pages

          this.tableList[this.activeName] = records

        })
        .catch(() => { })
    }
  },
  created() {
    this.getDataList();
  }
}
</script>

<style lang="scss" scoped>
.tureTask{
  display: flex;
  align-items: center;
  text-align: right;
  margin-top: 20px;
  span{
    width: 100px;
    margin-right: 20px;
  }
}
  .taskdetailed{
        margin-top: 20px;
    display: flex;
    .taskLabel{
      margin-right: 20px;
      width: 150px;
      text-align: right;
    }
  }
</style>